<template>
    <div class="type_right_top">
        <div v-for="(item , i ) of top" :key="'top'+i" @click="sendData(item.link,item.title)">
            <div><img :src="item.image" alt=""></div>
            <p>{{ item.title }}</p>
        </div>
        <div  class="null" v-for="(item , i ) of (3-top.length%3)" :key="'t'+i"></div>
    </div>
</template>

<script>

import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
    data() {
        return {
            kk:null
        };
    },
    props:{
        top:null,

    },
    computed:{
        ...mapState(['selltype'])
    },
    components: {},
    methods:{
        sendData(data,msg){
            let result = data.substring(data.indexOf("=")+1, data.indexOf("&"))
            // this.TypeListData(result);
            this.$router.push({name:"TypeContent",params:{
                id:result,msg:msg
            }});
            
            
        },
        ...mapActions(['TypeListData']),
    }
};
</script>

<style lang='less' scoped>
    .type_right_top{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        >div{
            width:160px;
            height:190px;
            margin-top:20px;
            margin-bottom: 20px;
            text-align: center;
            >div{ 
                width:160px;
                height:130px;
                img{
                    width:130px;
                    height:130px;  
                }
                p{
                    margin-top:20px;
                    text-align: center;
                }
            }    
        }
        .null{
            width:160px;
            height:0px;
        }
       
    }
</style>
